<template>
  <div class="page-user-account">
    <t-row :gutter="20">
      <t-col :xl="3" :lg="4" :md="6" v-for="(item, i) in data" :key="i">
        <div class="bg-box">
          <div class="more">
            <t-dropdown :min-column-width="120" trigger="click" placement="bottom-right" @click="data => emit(data.value, item)">
              <template #dropdown>
                <t-dropdown-menu>
                  <t-dropdown-item value="update">{{ $t('common.update') }}</t-dropdown-item>
                  <t-dropdown-item value="delete">{{ $t('common.delete') }}</t-dropdown-item>
                </t-dropdown-menu>
              </template>
              <t-button theme="default" variant="text" shape="square">
                <t-icon name="more"/>
              </t-button>
            </t-dropdown>
          </div>
          <div class="name wrap">
            {{ item.name }}
          </div>
          <div class="item wrap">
            <span>{{ lang.t('username') }}</span>{{ item.username }}
          </div>
          <div class="item wrap">
            <span>{{ lang.t('phone') }}</span>{{ item.phone }}
          </div>
          <div class="item wrap">
            <span>{{ lang.t('status') }}</span>
            <b :class="{'error': !item.status}">{{ lang.tm('status_text')[item.status] }}</b>
          </div>
          <div class="plugin">
            <template v-for="(item, i) in item.plugin_list" :key="item.id()" >
              <t-avatar v-if="i < 7" :image="item.img()" class="avatar" size="medium" shape="round"/>
            </template>
            <t-avatar size="medium" shape="round" v-if="!item.plugin_list.length || item.plugin_list.length > 7">
              <template #icon>
                <t-icon name="ellipsis" />
              </template>
            </t-avatar>
          </div>
        </div>
      </t-col>
    </t-row>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import app from '@/app'

  const props = defineProps(['data'])
  const emit = defineEmits(['delete', 'update'])
  const lang = app.lang.space('page.user.account')
</script>
